<template>
  <div id="customerNotice">
    <div class="content">
      <p class="top">公告</p>
      <div class="text" v-html="text"></div>
      <p class="agreement">
        <label for="agree">
          <input type="checkbox" name="agree" id="agree" v-model="agree">
          <span class="check"></span>
        </label>
        <span class="agreementSpan">
          我已阅读
          <span class="go-page" @click="seeAg">《{{agreementName}}》</span>
        </span>
      </p>
      <button class="join" @click="join">我已知晓，进入平台</button>
      <button class="out" @click="out">取消并退出</button>
    </div>
    <agree-ment ref="ag" hasReadText="已阅读此协议" @isRead="isRead"></agree-ment>
  </div>
</template>
<script>
  import { noticeList , agreeCustomerTransfer , postLogout } from '../http/api';
  export default {
    name: "CustomerNotice",
    data() {
      return {
        introduce:'新客户迁移公告',
        text:'为了提供更优质透明的服务，并适应全球化市场的需求，人人矿场将接入算力云矿池平台——RR Pool ，为用户提供全新的、更加透明和可靠的链上算力管理及交割服务。届时，用户历史购买并持有的算力的管理服务将统一改由香港SuperB Grace LTD公司提供，具体服务内容详见《算力在线管理服务协议》。如有任何疑问，请联系销售代表或客服。',
        agree : false ,//是否同意协议
        agreementName : '',//协议标题
        agreement : '',//协议内容
      }
    },
    components: {
      AgreeMent: resolve => { require(['../components/AgreeMent'], resolve)  },
    },
    mounted() {
      let thiz = this;
      noticeList().then(res => {
        if( res.code == 506 ){
          thiz.agreement = res.data.content;
          thiz.agreementName = res.data.name;
        }
      })
    },
    methods:{
      isRead(){
        this.agree = true;
      },
      seeAg(){
        this.$refs.ag.agreement( this.agreement );
      },
      join(){
        let toast = require('../common/js/toast').toast;
        if( !this.agree ){
          toast('请同意协议');
          return;
        }
        agreeCustomerTransfer().then( res => {
          if( res.code == 200){
            toast('操作成功');
            this.$store.commit('showCustomerNotice', false);
          }
        });
      },
      out(){
        this.$store.commit('showCustomerNotice',false);
        postLogout({noToast:true}).then(res => {
          if( res.code == 200 ){
            this.$store.commit('storageRemove','all');
            this.$router.replace({path: '/login'});
          }
        });
      }
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  #customerNotice{
    position: fixed;z-index: 6;height: 100%;background: rgba(0,0,0,0.5);top:0;left: 0;width: 100%;
  }
  .content{
    width: 6.56rem;position: absolute;left: 50%;top:50%;transform: translateY(-50%);margin-left: -3.28rem;background: #fff;border-radius: 0.06rem;
    >.top{
      background: url("../common/imgs/customer_notice_top.png");background-size: 100% 100%;font-size: 0.6rem;text-align: center;color: #fff;height: 1.92rem;line-height: 1.92rem;font-family: 'PingFang-SC-Bold';
    }
    >.text{
      font-size: 0.28rem;color: #262626;line-height: 210%;padding: 0.3rem 0.46rem;
    }
    >.agreement{
      display: block;padding:0 0.46rem;overflow: hidden;
      label{
        position: relative;display: inline-block;width: 0.3rem;height: 0.3rem;float: left;
        input{position: absolute;z-index: 1;width: 100%;height: 100%;opacity: 0;border:0;}
        .check{width:100%;height: 100%;border: 0.01rem solid#FAA842;border-radius: 0.04rem;display: inline-block;}
        input:checked + .check{background: url("../common/imgs/agreethis.png");background-size: 100% 100%;border:0;}
      }
      >.agreementSpan{
        color: #898989;font-size: 0.24rem;float: left;line-height: 0.3rem;padding-left: 0.12rem;
        >.go-page{
          color: #FAA842;
        }
      }
    }
    .join{
      color: #fff;background: #FAA842;height: 0.86rem;line-height: 0.86rem;border-radius: 1rem;width: calc( 100% - 0.6rem );margin:0 auto;display: block;font-size: 0.28rem;margin-top: 0.25rem;
    }
    .out{
      color: #898989;background: none;height: 1rem;line-height: 1rem;border-radius: 1rem;width: calc( 100% - 0.6rem );margin:0 auto;display: block;font-size: 0.28rem;
    }
  }
</style>
